<template>
	<view>
		<uni-forms ref="form" :rules="{}">
			<uni-forms-item label="姓名" name="">
				<uni-easyinput  v-model="user.username"   placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="密码" name="">
				<uni-easyinput type="password"   v-model="user.password" placeholder="请输入密码" />
			</uni-forms-item>
			<uni-forms-item label="年龄" name="">
				<slider @change="ageChange" min="0" max="100" show-value />
			</uni-forms-item>
			<uni-forms-item label="性别" name="">
				<radio-group name=""  @change="sexChange">
					<label>
						<radio value="1" :checked="'1'===user.sex" /><text>男</text>
					</label>
					<label>
						<radio value="2" :checked="'2'===user.sex" /><text>女</text>
					</label>
				</radio-group>
			</uni-forms-item>
			<uni-forms-item label="爱好" name="">
				<checkbox-group name="" @change="hobbyChange">
					<label v-for="item,index in user.hobbies" style="margin-left: 20rpx; margin-right: 20rpx;">
						<checkbox :value="item" /><text>{{item}}</text>
					</label>
				</checkbox-group>
			</uni-forms-item>
			<uni-forms-item label="介绍" name="">
				<uni-easyinput  v-model="user.introduce" type="textarea" autoHeight placeholder="请输入个性介绍" />
			</uni-forms-item>
			<uni-forms-item label="日期" name="">
				<picker mode="date"  @change="dateChange">
					<view>{{user.datetimesingle}}</view>
				</picker>
			</uni-forms-item>
			<uni-forms-item label="城市" name="">

				<uni-combox  :candidates="user.cities" placeholder="请选择城市" v-model="user.city" ></uni-combox>
			</uni-forms-item>
			<uni-forms-item label="技能" name="">
				<picker mode="selector" :range="user.skills" @change="skillChange">
					<view>{{user.skill==''?'请选择':user.skills[user.skill]}}</view>
				</picker>
			</uni-forms-item>
			<uni-forms-item label="是否接受推荐" name="">
				<switch :checked="user.adviceAccept" @change="adviceChange"  />
			</uni-forms-item>
			<uni-forms-item label="" name="">
				<button type="primary" @click="register">注册</button>
			</uni-forms-item>
		</uni-forms>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					username: '',
					age: 0,
					password: '',
					repassword: '',
					sex: 2,
					hobbies: ['足球', '篮球', '排球', '网球', '羽毛球', '乒乓球'],
					hobby: [],
					introduce: "",
					datetimesingle: '2023-09-09',
					city: '',
					cities: ['北京', '上海', '长沙', '深圳', '广州'],
					skills: ['编程', '足球', '开车', '开飞机'],
					skill: '',
					adviceAccept: true
				}
			}
		},
		methods: {
			usernameChange(e){
				console.log(e);
			},
			sexChange(e) {
				this.user.sex = e.detail.value
			},
			adviceChange(e) {
				this.user.adviceAccept = e.detail.value
			},
			hobbyChange(e) {
				this.user.hobby = e.detail.value
			},
			ageChange(e) {
				this.user.age = e.detail.value
			},
			dateChange(e) {
				this.user.datetimesingle = e.detail.value
			},
			skillChange(e) {
				this.user.skill = e.detail.value
			},
			register(e) {
				uni.showToast({
					title: '' + this.user.username + '\r' + this.user.age + '\t' +
						this.user.city + '\t' + this.user.datetimesingle + '\t' +
						this.user.introduce + '\t' +
						this.user.hobby + '\t' + this.user.skill + '\t' +
						this.user.adviceAccept,

					icon: 'none'
				});
			}
		},
		onLoad: () => {
			uni.onTabBarMidButtonTap(function(e){
				console.log(e)
				
			})
		}
	}
</script>

<style>
.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>